<style>
    .payment-method {
        border-radius: 2px;
        border: 1px solid #dedede;
        cursor: pointer;
        overflow: hidden;
        position: relative;
    }
    
    .payment-method.active {
        border-color: #0087c2;
    }
    
    .payment-method.active::after {
        content: '';
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-right: 6px solid #0087c2;
        border-bottom: 6px solid #0087c2;
        border-left: 6px solid transparent;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    .payment-method img {
        width: 100%;
    }
    
    .payment-method .icon {
        text-align: center;
        padding: 8px 0 1px;
    }
    
    .payment-method .icon i {
        font-size: 31px;
    }
    
    .payment-method .name {
        text-align: center;
        padding: 1px 0 4px;
        letter-spacing: 1px;
    }
    
    .price-package {
        margin-bottom: 15px;
        text-align: center;
        border-radius: 2px;
        border: 1px solid #dedede;
        cursor: pointer;
        padding: 5px 0;
        position: relative;
        overflow: hidden;
    }
    
    .price-package.active {
        border-color: #0087c2;
    }
    
    .price-package.active::after {
        content: '';
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-right: 6px solid #0087c2;
        border-bottom: 6px solid #0087c2;
        border-left: 6px solid transparent;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    .price-package .price {
        font-size: 20px;
        margin-bottom: 5px;
    }
</style>
<div data-bind="modal: isShow" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" data-bind="css: { 'modal-sm': payingMode }" style="transition: 300ms all;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-bind="click: onHide, visible: !payingMode()"><i class="fa fa-close"></i></button>
                <h4 class="modal-title" data-bind="text: Kooboo.text.component.topupModal.title"></h4>
            </div>
            <div class="modal-body" data-bind="visible: !payingMode()">
                <div class="form-group">
                    <label for="" class="control-label" data-bind="text: Kooboo.text.component.topupModal.paymentMethod"></label>
                    <div class="row" data-bind="foreach: paymentMethods">
                        <div class="col-md-3">
                            <div class="payment-method" data-bind="css: { active: $data.type == $parent.paymentMethod() }, click: $parent.changePaymentMethod">
                                <!-- ko if: $data.iconType == 'img' -->
                                <img data-bind="attr: { src: $data.icon, alt: $data.type }">
                                <!-- /ko -->
                                <!-- ko if: $data.iconType == 'icon' -->
                                <div class="icon">
                                    <i data-bind="attr: { class: $data.icon }"></i>
                                </div>
                                <div class="name" data-bind="text: $data.displayName"></div>
                                <!-- /ko -->
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="form-group" data-bind="visible: paymentMethod() !== 'coupon'">
                    <label class="control-label" data-bind="text: Kooboo.text.component.topupModal.rechargeAmount"></label>
                    <div class="row" data-bind="foreach: paymentPackages" style="margin-bottom: -15px;">
                        <!-- ko if: $data.type == 'set' -->
                        <div class="col-md-4">
                            <div class="price-package" data-bind="css: { active: $parent.currentPackage() == $data }, click: $parent.changePackage">
                                <div data-bind="text: $data.sign + $data.amount" class="price"></div>
                                <div data-bind="text: Kooboo.text.common.price + ': ' + $data.sign + $data.price" class="sale"></div>
                            </div>
                        </div>
                        <!-- /ko -->
                        <!-- ko if: $data.type == 'mod' -->
                        <div class="col-md-4">
                            <div class="price-package" data-bind="css: { active: $parent.currentPackage() == $data }, click: $parent.changePackage">
                                <div class="price" data-bind="text: Kooboo.text.component.topupModal.customize"></div>
                                <div class="sale" data-bind="text: Kooboo.text.component.topupModal.largeThan"></div>
                            </div>
                        </div>
                        <!-- /ko -->
                    </div>
                </div>
                <div class="form-group" data-bind="visible: paymentMethod() == 'coupon'">
                    <label class="control-label" data-bind="text: Kooboo.text.component.topupModal.coupon"></label>
                    <input type="text" class="form-control" data-bind="value: couponCode, error: couponCode">
                </div>
                <div class="form-group" data-bind="collapsein: currentPackage() && currentPackage().type == 'mod'">
                    <input type="number" class="form-control" data-bind="value: chargeAmount, error: chargeAmountValue, event: { keydown: Kooboo.event.input.positiveNumberOnly }, attr: { placeholder: Kooboo.text.placeholder.largeThan }">
                </div>
            </div>
            <div class="modal-body" data-bind="visible: payingMode">
                <div id="qr-code" style="text-align:center"></div>
            </div>
            <div class="modal-footer">
                <!-- ko if: !payingMode() -->
                <button class="btn green" data-bind="click: onPay,text: confirmBtnText"></button>
                <button class="btn gray" data-bind="click: onHide,text: Kooboo.text.common.cancel"></button>
                <!-- /ko -->
                <!-- ko if: payingMode -->
                <button class="btn green" data-bind="click: onPayingSuccess, text: Kooboo.text.component.topupModal.paid"></button>
                <button class="btn btn-danger" data-bind="click: onPayingFailed, text: Kooboo.text.common.failed"></button>
                <!-- /ko -->
            </div>
        </div>
    </div>
</div>